<template>
    <div>
        <div class="list">
            <li v-for="(item, index) of item" :key="index">{{item.text}}</li>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import Footer from '@/components/footer'
    export default  {
        name: 'list',
        components:{
            Footer,
        },
        data() {
            return {
                item:[
                    {text:'vue'},
                    {text:'react'},
                    {text:'jquery'},
                    {text:'angular'},
                    {text:'javascript'},
                    {text:'css'},
                    {text:'html'},
                ]
            }
        }
    }
</script>

<style scoped lang="less">
    .list {
        li {
            padding:1.5rem 0;
            text-align: center;
        }
    }
</style>